<template>
	<div>
		<div class="overlay">
			<div class="overlay-content scrolling">

				<div class=" wrap row-justify-content">
					<div>
						<div class="title">
							<h4>备份提示</h4>
							<p>获得助记词等于拥有钱包资产所有权</p>
							<img src="../../assets/images/logo.png" width="100" height="100" />
						</div>
						<div>
							<ul>
								<li class="list">
									<span>备份助记词</span>
									<ul>
										<li>使用纸笔正确抄写助记词</li>
										<li>如果你的手机丢失、被盗、损坏，助记词将可以恢复你的资产</li>
									</ul>
								</li>
								<li class="list">
									<span>
					                	离线保管
					                </span>
									<ul>
										<li>妥善保管至隔离网络的安全地方</li>
										<li>请勿将助记词在互联网环境下分享和存储，比如邮件、相册、社交应用等</li>
									</ul>
								</li>
							</ul>
						</div>
						<van-dialog v-model="show" title="请输入密码" show-cancel-button>
							<div class="pass">
								<input type="text" />
							</div>
						</van-dialog>
						<van-button type="info" class="backup" @click="tipshow = true">下一步</van-button>
					</div>
				</div>
			</div>
		</div>

		<van-popup v-model="tipshow" round :style="{ height: '360px' }">
			<div class="attention ">
				<div>
					<img src="../../assets/images/dont.png" width="70" height="100" srcset />
				</div>
				<div>
					<h5>请勿截屏</h5>
				</div>
				<div>
					请勿截频分享和存储，这将可能被第三方 恶意软件手机，造成资产损失
				</div>
				<div class="button">
					<van-button @click="tipshow = false;" class="cancel">取消</van-button>
					<van-button to="BackupMnemonic" type="info">知道了</van-button>
				</div>
			</div>
		</van-popup>
	</div>
</template>
<script>
	export default {
		data() {
			return {
				show: false,
				tipshow: false
			};
		},
		methods: {
			press() {
				this.show = false;
			}
		}
	};
</script>
<style lang="less" scoped>
	.van-nav-bar__text {
		font-size: 13px;
	}
	
	.wrap {
		margin-top: 55px;
	}
	
	.title {
		margin-bottom: 64px;
		text-align: center;
		p {
			margin-top: 17px;
			margin-bottom: 46px;
			font-size: 12px;
			color: #999999;
		}
		img {
			margin: 0 auto;
		}
	}
	
	.list {
		font-size: 12px;
		list-style: disc;
		margin-bottom: 20px;
		span {
			font-weight: bold;
		}
		ul {
			width: 290px;
			margin-top: 10px;
		}
		ul li {
			color: #999999;
			line-height: 22px;
		}
	}
	
	.backup {
		width: 100%;
		border-radius: 7px;
		height: 36px;
		line-height: 36px;
		font-size: 12px;
		margin-top: 38px;
	}
	
	.pass {
		padding: 20px 0;
		input {
			border: 1px solid #ececed;
			margin: 0 auto;
			display: block;
		}
	}
	
	.attention {
		color: #000;
		padding: 30px 25px;
		box-sizing: border-box;
		text-align: center;
		width: 355px;
		height: 350px;
		div:nth-child(1) {
			margin-bottom: 24px;
			margin-top: 10px;
		}
		div:nth-child(2) h5 {
			font-size: 15px;
			margin-bottom: 14px;
		}
		.button {
			margin-top: 50px;
			width: 100%;
			display: flex;
			justify-content: space-between;
			button {
				border-radius: 5px;
				line-height: 35px;
				width: 140px;
				height: 35px;
			}
		}
		.cancel {
			background: #e3f1fa;
			color: #2295f3;
		}
	}
	
	.van-popup--center {
		top: auto;
		bottom: 10px;
		transform: translate3d(-50%, -0%, 0)
	}
</style>